<template>
  <div class="category">
    <div class="cat_mid">
      <div class="route">
        当前位置：
        <router-link to="/">首页</router-link>
        <span>＞</span>
        <router-link to="/category">蛋糕</router-link>
        <!-- <span>＞</span> -->
        <a href="#">{{ type }}</a>
      </div>
      <div class="classify">
        <div class="classify_text">蛋糕分类：</div>
        <ul>
          <li><a href="#" @click="newcake(1)">新品上市</a></li>
          <li><a href="#" @click="newcake(2)">经典甄选</a></li>
          <li><a href="#" @click="newcake(3)">萌宝之选</a></li>
          <li><a href="#" @click="newcake(4)">福寿双全</a></li>
          <li><a href="#" @click="newcake(5)">特色口味</a></li>
          <li><a href="#" @click="newcake(6)">青春专属</a></li>
          <li><a href="#" @click="newcake(7)">庆典时刻</a></li>
        </ul>
      </div>
  
    <!-- 子组件==》商品列表 -->
      <list :arr="arr"></list>
    </div>
 

    <!-- 右侧悬浮框 -->
    <div class="soller">
      <ul>
        <li>
          <a href="#" @mouseenter="show" @mouseleave="leave">
            <img src="../assets/list/phone.png" />
          </a>
           <div v-if="phone_show" class="phone_detail">
              <p>订购热线</p>
              <p>4001-170-170</p>
              <p>(热线服务时间: 08:00-20:00)</p>
          </div>
        </li>
        <li>
          <a href="#" @mouseenter="show2" @mouseleave="leave2">
            <img src="../assets/list/erweima.png" alt="" />
            <div v-if="erweima_show"  class="erweima_detail">
               <img src="../assets/list/wx.png" alt="">
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../assets/list/shangjiantou.png" alt="" />
          </a>
        </li>
      </ul>
    </div>
   
  </div>
</template>

<script>
import list from "./List.vue";
export default {
  components: { list },

  data() {
    return {
      arr: [],
      type: "",
      phone_show:false,
      erweima_show:false
    };
  },

  methods: {
     show(){
      this.phone_show=true
     },
     show2(){
       this.erweima_show=true
     },
     leave(){
      this.phone_show=false
     },
     leave2(){
      this.erweima_show=false
     },
    newcake(val) {
      this.axios.get(`/product/cakes?fid=${val}`).then((result) => {
        this.arr = result.data.results;
        //arr=>[{},{},{},{},{},{}]
        console.log(this.arr);
        if (val == 1) {
          this.type = ">新品上市";
        } else if (val == 2) {
          this.type = ">经典甄选";
        } else if (val == 3) {
          this.type = ">萌宝之选";
        } else if (val == 4) {
          this.type = ">福寿双全";
        } else if (val == 5) {
          this.type = ">特色口味";
        } else if (val == 6) {
          this.type = ">青春专属";
        } else {
          this.type = ">庆典时刻";
        }
      });
    },
  },

  mounted() {
    this.axios.get("/product/allcakes").then((res) => {
      console.log(res.data.results);
      this.arr = res.data.results;
    });
  },
};
</script>

<style scoped>
.category {
  margin-top: 95px;
  width: 100%;
  height: auto;
  background: #fff;
}
.cat_mid {
  width: 1170px;
  height: auto;
  margin: 0 auto;
  padding: 10px 20px;
}

.classify {
  font-size: 12px;
}

.classify_text {
  float: left;
}
.classify a {
  color: #757575;
}
.route {
  font-size: 12px;
}
.route a {
  color: #757575;
}
.classify ul li {
  float: left;
  margin: 0 10px;
  cursor: pointer;
}

/*悬浮框图标*/
.soller {
  position: fixed;
  top: 80%;
  right: 20px;
  border: 1px solid rgba(0, 0, 0, 0);
}
.soller ul {
  margin-top: -200px;
}
.soller ul li {
  width: 60px;
  height: 60px;
  margin: 1px 0 0;
  list-style: none;
  background-color: #f7e4e4;
}

.soller ul li a img {
  width: 50px;
  height: 50px;
  vertical-align: middle;
  display: table-cell;
  margin: 5px auto 0;
}
.soller ul li:nth-child(2) a div img{
      width: 120px;
      height: 150px;
}

.phone_detail{
      width: 177px;
      height: 120px;
      background-color: #fff;
      border: 1px solid #d7d7d7;
      position: absolute;
      top: -190px;
      right: 62px;
     
}
.phone_detail p:nth-child(1){
      font-size: 16px;
      margin-top: 16px;
      margin-left: 17px;
}
.phone_detail p:nth-child(2){
      font-size: 23px;
      margin-left: 17px;
      color: #c2002d;
      font-family: arial;
}
.phone_detail p:nth-child(3){
      font-size: 12px;
      margin-left: 17px;
      font-family: arial;
      color: #757575;
}
.erweima_detail{
       width: 120px;
      height: 150px;
      background-color: #fff;
      border: 1px solid #d7d7d7;
      position: absolute;
      top: -130px;
      right: 62px;
}
</style>